<template>
  <div>
    <navList></navList>
    <div class="news-dynamic">
      <div class="subtitle"><span>{{ $t('navbar.news') }}</span><i></i></div>
      <div class="dynamic-list">
        <div class="dynamic-item" v-for="(item, index) in newsList" :key="index">
          <!-- <router-link :to="'/news-detail/'+item.newsId"><span class="title">{{item.title}}</span></router-link> -->
          <a :href="'/#/news-detail/'+item.newsId"><span class="title">{{item.title}}</span></a>
          <span class="time pc-only">{{item.time}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import navList from 'COMPS/nav-list.vue'

  export default {
    name: 'news-dynamic',
    data() {
      return {
        newsList: []
      }
    },
    components: {
      navList
    },
    mounted() {
      this.getNewsList();
    },
    methods: {
      getNewsList() {
        let that = this;
        if (window.DEBUGGING) {
          return new Promise((resolve) => {
            resolve([{
              title: '1这是一条新闻热点，它火爆了全球，身份特殊，有点但没说收看',
              time: '2018-09-19',
              newsId: 1
            },{
              title: '这是一条新闻热点，它火爆了全球，身份特殊，有点但没说收看',
              time: '2018-09-19',
              newsId: 2
            },{
              title: '这是一条新闻热点，它火爆了全球，身份特殊，有点但没说收看',
              time: '2018-09-19',
              newsId: 3
            },{
              title: '这是一条新闻热点，它火爆了全球，身份特殊，有点但没说收看',
              time: '2018-09-19',
              newsId: 4
            },{
              title: '这是一条新闻热点，它火爆了全球，身份特殊，有点但没说收看',
              time: '2018-09-19',
              newsId: 5
            }])
          }).then((res) => {
            that.newsList = res;
          })
        }

        this.$axios.get('/pc.php/news/list', {
          params: {
            page: 1
          }
        }).then((res) => {
          that.newsList = res.data.map((e, i) => {
            return {
              title: e.news_title,
              time: e.news_time,
              newsId: e.news_id
            }
          })
        })
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

  .news-dynamic {
    width: 880px;
    display: inline-block;
    .dynamic-list {
      padding: 0 20px;
      .dynamic-item {
        line-height: 48px;
        color: #666;
        &:hover {
          color: #006d60;
          >a .title {color: #006d60;}
        }
        .title {
          cursor: pointer;
          color: #666;
        }
        .time {
          font-size: 14px;
          float: right;
        }
        .On-xs({
          .Mult-line(1);
          line-height: 36px;
          height: 36px;
          font-size: 14px;
        });
      }
    }
  }
</style>